<template>
	<!--	项目群-->
	<el-row :gutter="20">
		<el-col :span="12">
			<el-card>
				<div style="display: flex;justify-content: space-between;align-items: center">
					<div style="color: #4d62a5;font-size: 20px;font-weight:900;">项目排名</div>
					<ul id="navbutton">
						<li>
							<el-button @click="project_number='energy'" @mouseover="changecolor"
									   @mouseleave="changeback"
									   auto-insert-space>能源
							</el-button>
						</li>
						<li>
							<el-button @click="project_number='comfort'" @mouseover="changecolor"
									   @mouseleave="changeback"
									   auto-insert-space>舒适
							</el-button>
						</li>
						<li>
							<el-button @click="project_number='seep'" @mouseover="changecolor" @mouseleave="changeback">
								经济表现
							</el-button>
						</li>
					</ul>
				</div>
			</el-card>
			<el-card style="height: 725px;">
				<div style="display: flex;justify-content: space-between;align-items: center">
					<div style="color: #4d62a5;font-size: 18px;font-weight:900;">能源</div>
					<div>
						<ul class="chartTitle">
							<li style="width:15px;height:15px;background-color:orange;"></li>
							<li>设定项目</li>
							<li style="width:15px;height:15px;background-color:#D2E9FF;margin-left:20px"></li>
							<li>未设定项目</li>
						</ul>
					</div>
				</div>

				<el-divider/>
				<div v-show="project_number=='energy'">
					<div class="cc">
						类似项目:
						<el-select size="small" v-model="project" placeholder="请选择指标" @change="choiceproject"
								   style="width:80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						同地区:
						<el-select size="small" v-model="area" placeholder="请选择指标" style="margin-left: 10px;width:80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						同功能:
						<el-select size="small" v-model="fun" placeholder="请选择指标" style="margin-left: 10px;width:80px">
							<el-option label="总单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						指标:
						<el-select size="small" v-model="target" placeholder="请选择指标"
								   style="margin-left: 10px;width:80px">
							<el-option label="总" value="area"></el-option>
							<el-option label="单位面积m²" value="area"></el-option>
							<el-option label="机房能效" value="effect"></el-option>
						</el-select>
						单位:
						<el-select size="small" v-model="unit" placeholder="请选择单位" style="margin-left: 10px;width:80px">
							<el-option label="kwh" value="kwh"></el-option>
							<el-option label="tce" value="tce"></el-option>
							<el-option label="RMB" value="RMB"></el-option>
						</el-select>
					</div>
					<el-divider border-style="none"/>
					<scEcharts style="margin-top: -50px;" height="300px" :option="option"></scEcharts>
					<div style="float:right;font-size:10px;">排名变动</div>
					<br/>
					<div style="float:right;margin-top:20px;">
						<el-date-picker
							v-model="value1"
							type="monthrange"
							range-separator="To"
							start-placeholder="开始月份"
							end-placeholder="结束月份"
							@change="monthchange1"
							size="mini"
						/>
					</div>
					<scEcharts style="margin-top: 60px;" height="240px" :option="option1"></scEcharts>
				</div>
				<div v-show="project_number=='comfort'">
					<div style="float:right;">
						单位：
						<el-select v-model="unit" placeholder="请选择单位" style="width:150px">
							<el-option label="kwh" value="kwh"></el-option>
							<el-option label="tce" value="tce"></el-option>
							<el-option label="RMB" value="RMB"></el-option>
						</el-select>
					</div>
					<el-divider border-style="none"/>
					<scEcharts style="margin-top: 0" width="900px" height="300px" :option="option"></scEcharts>
					<div style="float:right;font-size:10px;">排名变动</div>
					<br/>
					<div style="float:right;margin-top:20px;">
						时间选择：
						<el-date-picker
							v-model="value2"
							type="monthrange"
							range-separator="To"
							start-placeholder="开始月份"
							end-placeholder="结束月份"
							@change="monthchange2"
						/>
					</div>
					<scEcharts style="margin-top:60px" width="900px" height="240px" :option="option1"></scEcharts>
				</div>
				<div v-show="project_number=='seep'">
					<div style="float:right;">
						单位：
						<el-select v-model="unit" placeholder="请选择单位" style="width:150px">
							<el-option label="kwh" value="kwh"></el-option>
							<el-option label="tce" value="tce"></el-option>
							<el-option label="RMB" value="RMB"></el-option>
						</el-select>
					</div>
					<el-divider border-style="none"/>
					<scEcharts style="margin-top:20px" width="900px" height="300px" :option="option"></scEcharts>
				</div>
			</el-card>
		</el-col>
		<el-col :span="12">
			<el-card style="height: 815px;" class="el-card">
				<div style="float:right">
					<el-input style="width:300px;margin-right:20px;" :prefix-icon="Search"
							  placeholder="项目名称 功能 地点"></el-input>
					<el-button style="background-color:#4d62a5;color:white;" auto-insert-space>搜索</el-button>
				</div>
				<el-table :cell-style="{
					background:'#f6faff'
				}" style="z-index:1;" :data="tableData" @cell-mouse-enter="enter" @cell-mouse-leave="leave">
					<el-table-column prop="project_name" sortable label="项目名称">
						<template #default="scope">
							<span @click="pus" style="cursor: pointer">
								{{ scope.row.project_name }}
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="city" sortable label="城市"/>
					<el-table-column prop="function" sortable label="功能"/>
					<el-table-column prop="online_time" sortable label="上线时间"/>
					<el-table-column prop="img" label="图片">
						<template #default="scope">
							<img :src="scope.row.img" width="80" height="40" alt="">
						</template>
					</el-table-column>
				</el-table>
				<img v-show="img!==''" :src="img" height="200" width="300"
					 style="position:fixed;right:50px;bottom:50px;z-index: 2;" alt="">
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {useRouter} from 'vue-router'
import {Search} from '@element-plus/icons-vue'
import scEcharts from '@/components/scEcharts';

var project_number = ref('energy')
var project = ref('')
var area = ref('')
var fun = ref('')
var target = ref('')
var unit = ref('')
var value1 = ref('')
var value2 = ref('')
var img = ref('')
var option = reactive(
	{
		legend: {
			orient: 'vertical',
			right: 20,
			top: '60%',
			itemHeight: 1
		},
		grid: {
			right: '15%',
			top: '5%',
			left: '5%',
			bottom: '5%',
			containLabel: true,
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		xAxis: {
			type: 'category',
			data: ['项目1', '项目2', '项目3', '昆山假日酒店', '项目1', '项目1', '项目1', '项目1']
		},
		yAxis: {
			axisLine: {
				show: true
			},
			type: 'value'
		},
		series: [
			{
				data: [
					{
						value: 0.4,
						itemStyle: {
							color: '#D6EBFA'
						},
					},
					{
						value: 0.58,
						itemStyle: {
							color: '#D6EBFA'
						}
					},
					{
						value: 0.96,
						itemStyle: {
							color: '#D6EBFA'
						}
					},
					{
						value: 0.68,
						itemStyle: {
							color: '#FFA34E'
						}
					},
					{
						value: 0.56,
						itemStyle: {
							color: '#D6EBFA'
						}
					},
					{
						value: 0.56,
						itemStyle: {
							color: '#D6EBFA'
						}
					},
					{
						value: 0.28,
						itemStyle: {
							color: '#D6EBFA'
						}
					},
					{
						value: 1,
						itemStyle: {
							color: '#D6EBFA'
						}
					},
				],
				type: 'bar'
			},
			{
				name: '平均数',
				type: 'line',
				symbol: 'none',
				data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
				itemStyle: {
					color: 'blue'
				}
			},
			{
				name: '中位数',
				type: 'line',
				symbol: 'none',
				data: [0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7],
				itemStyle: {
					color: 'red'
				}
			},
			{
				name: '本地先进',
				type: 'line',
				symbol: 'none',
				data: [0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6],
				itemStyle: {
					color: 'green'
				}
			},
			{
				name: '本地强制',
				type: 'line',
				symbol: 'none',
				data: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
				itemStyle: {
					color: 'orange'
				}
			}
		]
	}
)
var tableData = reactive(
	[
		{
			project_name: '某某某某项目',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年10月",
			img: 'https://img0.baidu.com/it/u=3340686185,1577682688&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},
		{
			project_name: '昆山假日酒店',
			city: '昆山,江苏',
			function: '酒店',
			online_time: "2022年1月",
			img: 'https://img2.baidu.com/it/u=70932408,3883424952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
		},

	]
)
var option1 = reactive(
	{
		grid: {
			right: '5%',
			top: '5%',
			left: '5%',
			bottom: '10%',
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
		},
		yAxis: {
			axisLine: {
				show: true
			},
			type: 'value'
		},
		series: [
			{
				data: [10, 14, 10, 5, 13, 9, 4, 7, 9, 15, 10, 5],
				type: 'line',
				smooth: true,
				lineStyle: {
					color: '#DDDDDD',
				},
				itemStyle: {
					color: '#DDDDDD',
				},
				areaStyle: {
					color: "#F5F6F6",
					opacity: 0.5,
				}
			},
			{
				data: [7, 8, 5, 12, 6, 9, 11, 14, 11, 6, 12, 15],
				type: 'line',
				smooth: true,
				lineStyle: {
					color: '#DDDDDD',
				},
				itemStyle: {
					color: '#DDDDDD',
				},
				areaStyle: {
					color: "#F5F6F6",
					opacity: 0.5,
				}
			},
			{
				data: [9, 5, 8, 9, 6, 12, 6, 8, 2, 14, 5, 10],
				type: 'line',
				smooth: true,
				lineStyle: {
					color: '#F79646',
				},
				itemStyle: {
					color: '#F79646',
				},
				areaStyle: {
					color: "#F5E9DF",
					opacity: 0.5,
				}
			}
		]
	}
)
var tt = useRouter()

function monthchange1() {
}

function monthchange2() {

}

function enter(row,) {
	img.value = row.img
}

function leave() {
	img.value = ''
}

function changecolor(event) {
	event.target.children[0].style.backgroundColor = '#4d62a5'
	event.target.style.backgroundColor = '#4d62a5'
	event.target.style.color = '#F0F0F0'
}

function pus() {
	tt.push('/project_outline')
}

function changeback(event) {
	event.target.children[0].style.backgroundColor = '#F0F0F0'
	event.target.style.backgroundColor = '#F0F0F0'
	event.target.style.color = 'black'
}

function choiceproject(val) {
	console.log(val)
	area.value = val
	fun.value = val
}
</script>

<style scoped>
#navbutton {
	list-style: none;
	float: right;
	margin-top:-5px;
}

#navbutton li {
	display: inline-block;
	margin-right: 20px;

}

.el-button {
	background-color: #F0F0F0;
	width: 80px;
	/* letter-spacing:5px; */
	text-align: center;
}

.chartTitle {
	list-style: none;
}

.chartTitle li {
	display: inline-block;
	margin-right: 5px;
	font-size: 15px;
}

.cc {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
</style>
